<template>
  <div>
    <section class="no-logged-in" v-if="!isLogin">
      <div class="title">
        HI,等你好久了
      </div>
      <div class="button-area">
        <button class="login" @click='login' type="button" name="button">登录</button>
        <button class="sign-in" type="button" name="button">注册</button>
      </div>
    </section>
    <section class="logged-in" v-else>
      <div class="title">我的</div>
      <div class="information">
        <img src="../../assets/myhead.png" class="myhead" alt="">
        <div class="content">
          <p>医药小叮当</p>
          <p>139*****2323</p>
          <p>积分: 0</p>
        </div>
      </div>
    </section>
    <section class="cell-list">
      <div class="cell">
        <img src="../../assets/dizhi.png"  class="cell-img" alt="">
        <div class="cell-content">
          常用地址
          <img src="../../assets/right.png" class="right-arrow" alt="">
        </div>
      </div>
      <div class="cell">
        <img src="../../assets/tuijian.png"  class="cell-img tuijian" alt="">
        <div class="cell-content no-border">
          推荐有奖
          <img src="../../assets/right.png" class="right-arrow" alt="">
        </div>
      </div>
      <div class="line" ></div>
      <div class="cell">
        <img src="../../assets/fuwu.png"  class="cell-img fuwu" alt="">
        <div class="cell-content ">
          服务中心
          <img src="../../assets/right.png" class="right-arrow" alt="">
        </div>
      </div>
      <div class="cell">
        <img src="../../assets/kaipiao.png"  class="cell-img kaipiao" alt="">
        <div class="cell-content">
          开票信息
          <img src="../../assets/right.png" class="right-arrow" alt="">
        </div>
      </div>
      <div class="cell">
        <img src="../../assets/us.png"  class="cell-img us" alt="">
        <div class="cell-content">
          关于我们
          <img src="../../assets/right.png" class="right-arrow" alt="">
        </div>
      </div>
    </section>
    <foot-bar></foot-bar>
  </div>
</template>

<script>
import FootBar from '@c/FootBar'
export default {
  data () {
    return {
      isLogin: false
    }
  },
  components: {
    FootBar
  },
  methods: {
    login () {
      this.isLogin = true
    }
  }
}
</script>

<style lang="scss" scoped>
  .no-logged-in{
    width: 100%;
    height: 4rem;
    background-color: #61a843;
    padding-top: 2.67rem;
    .title{
      width: 100%;
      height: .45rem;
      font-size: .45rem;
      text-align: center;
      color: #ffffff;
      margin-bottom: 1.33rem;
    }
    .button-area{
      width: 100%;
      height: .77rem;
      display: flex;
      justify-content: center;
      .login{
        width: 2.03rem;
        height: .75rem;
        background-color: #252525;
        border-radius: .37rem;
        opacity: 0.4;
        margin-right: 1.33rem;
        color: #fff;
        font-size: .4rem;
      }
      .sign-in{
        width: 2.03rem;
        height: .75rem;
        background-color: #252525;
        border-radius: .37rem;
        opacity: 0.2;
        color: #fff;
        font-size: .4rem;
      }
    }
  }
  .logged-in{
    width: 100%;
    height: 4.75rem;
    .title{
      height: 1.33rem;
      text-align: center;
      line-height: 1.33rem;
      color: #252525;
      font-size: .45rem;
      border-bottom: 1px solid #e0dfdd;
    }
    .information{
      height: 3.2rem;
      border-bottom: 1px solid #e0dfdd;
      padding: .13rem .85rem 0 .85rem;
      display: flex;
      .myhead{
        width: 1.81rem;
        height: 1.81rem;
        display: inline-block;
        margin-top: .27rem;
      }
      .content{
        height: 100%;
        display: inline-block;
        margin-left: .67rem;
        margin-top: .27rem;
        p{
          width: 100%;
          font-size: .4rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: .43rem;
          letter-spacing: 0px;
          color: #3e3e3e;
          padding-bottom: .27rem;
          padding-left: .13rem;
        }
      }
    }
  }
  .cell-list{
    // padding-left: .53rem;
    .cell{
      height: 1.07rem;
      // background-color: red;
      display: flex;
      align-items: center;
      padding-left: .53rem;
      .cell-img{
        width: .4rem;
        height: .56rem;
        margin-right: .27rem;
        &.tuijian{
          width: .44rem;
          height: .43rem;
        }
        &.fuwu{
          width: .49rem;
          height: .45rem;
        }
        &.kaipiao{
          width: .56rem;
          height: .48rem;
        }
        &.us{
          width: .45rem;
          height: .4rem;
        }
      }
      .cell-content{
        width: 100%;
        height: 1.07rem;
        // background-color: green;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: .4rem;
        color: #383735;
        border-bottom: 1px solid #e0dfdd;
        &.no-border{
          border: none;
        }
        .right-arrow{
          width: .16rem;
          height: .31rem;
          margin-right: .4rem;
        }
      }
    }
    .line{
      height: .24rem;
      background-color: #e5e5e5;
      border: solid 1px #e0dfdd;
    }
  }
</style>
